//base
$px1:1px;
$px5:5px;
$px10:10px;
$px12:12px;
$px14:14px;
$px15:15px;
$px16:16px;
$px18:18px;
$px20:20px;
$px22:22px;
$px24:24px;
$px25:25px;
$px26:26px;
$px28:28px;
$px30:30px;
$px32:32px;
$px35:35px;
$px36:36px;
$px40:40px;
$px42:42px;
$px45:45px;
$px48:48px;
$px50:50px;
$px64:64px;
$px100:100px;
/*margin*/
.mgauto{margin-left: auto !important;margin-right: auto !important;}
.mgt-5{margin-top:$px5}
.mgt-10{margin-top:$px10}
.mgt-15{margin-top:$px15}
.mgt-20{margin-top:$px20}
.mgt-25{margin-top:$px25}
.mgt-30{margin-top:$px30}
.mgt-35{margin-top:$px35}
.mgt-40{margin-top:$px40}
.mgt-45{margin-top:$px45}
.mgt-50{margin-top:$px50}
.mgb-5{margin-bottom:$px5}
.mgb-10{margin-bottom:$px10}
.mgb-15{margin-bottom:$px15}
.mgb-20{margin-bottom:$px20}
.mgb-25{margin-bottom:$px25}
.mgb-30{margin-bottom:$px30}
.mgb-35{margin-bottom:$px35}
.mgb-40{margin-bottom:$px40}
.mgb-45{margin-bottom:$px45}
.mgb-50{margin-bottom:$px50}
.mgl-5{margin-left:$px5}
.mgl-10{margin-left:$px10}
.mgl-15{margin-left:$px15}
.mgl-20{margin-left:$px20}
.mgl-25{margin-left:$px25}
.mgl-30{margin-left:$px30}
.mgl-35{margin-left:$px35}
.mgl-40{margin-left:$px40}
.mgl-45{margin-left:$px45}
.mgl-50{margin-left:$px50}
.mgr-5{margin-right:$px5}
.mgr-10{margin-right:$px10}
.mgr-15{margin-right:$px15}
.mgr-20{margin-right:$px20}
.mgr-25{margin-right:$px25}
.mgr-30{margin-right:$px30}
.mgr-35{margin-right:$px35}
.mgr-40{margin-right:$px40}
.mgr-45{margin-right:$px45}
.mgr-50{margin-right:$px50}
.pdt-5{padding-top:$px5}
.pdt-10{padding-top:$px10}
.pdt-15{padding-top:$px15}
.pdt-20{padding-top:$px20}
.pdt-25{padding-top:$px25}
.pdt-30{padding-top:$px30}
.pdt-35{padding-top:$px35}
.pdt-40{padding-top:$px40}
.pdt-45{padding-top:$px45}
.pdt-50{padding-top:$px50}
.pdb-5{padding-bottom:$px5}
.pdb-10{padding-bottom:$px10}
.pdb-15{padding-bottom:$px15}
.pdb-20{padding-bottom:$px20}
.pdb-25{padding-bottom:$px25}
.pdb-30{padding-bottom:$px30}
.pdl-5{padding-left:$px5}
.pdl-10{padding-left:$px10}
.pdl-15{padding-left:$px15}
.pdl-20{padding-left:$px20}
.pdl-25{padding-left:$px25}
.pdl-30{padding-left:$px30}
.pdr-5{padding-right:$px5}
.pdr-10{padding-right:$px10}
.pdr-15{padding-right:$px15}
.pdr-20{padding-right:$px20}
.pdr-25{padding-right:$px25}
.pdr-30{padding-right:$px30}
.pd-5{padding:$px5}
.pd-10{padding:$px10}
.pd-15{padding:$px15}
.pd-20{padding:$px20}
.pd-25{padding:$px25}
.pd-30{padding:$px30}
.pd-40{padding:$px40}
.pd-50{padding:$px50}
.fs-12{font-size:$px12}
.fs-14{font-size:$px14}
.fs-16{font-size:$px16}
.fs-18{font-size:$px18}
.fs-20{font-size:$px20}
.fs-22{font-size:$px22}
.fs-24{font-size:$px24}
.fs-26{font-size:$px26}
.fs-28{font-size:$px28}
.fs-30{font-size:$px30}
.fs-32{font-size:$px32}
.fs-36{font-size:$px36}
.fs-48{font-size:$px48}
.fs-64{font-size:$px64}
.fs-0{font-size:0;letter-spacing:-$px5}
.fly-btn{
  background-color: currentcolor;
  display: inline-block;
  height: 32px;
  line-height: 32px;
  padding: 0 15px;
  white-space: nowrap;
  text-align: center;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  opacity: 0.9;
  filter: alpha(opacity=90);
}
.fly-btn {
  outline: 0;
  -webkit-transition: border-color 0.3s cubic-bezier(.65,.05,.35,.5);
  transition: border-color 0.3s cubic-bezier(.65,.05,.35,.5);
  -webkit-box-sizing: border-box!important;
  -moz-box-sizing: border-box!important;
  box-sizing: border-box!important;
}
.fly-btn:hover {
  opacity: 0.8;
  filter: alpha(opacity=80);
}
$normal:#009688;
.normal{color: $normal;}
.bgc-normal{background-color: $normal;}
$warn:#FF5722;
.warn{color: $warn;}
.bgc-warn{background-color: $warn;}
$dark:#33373d;
.dark{color: $dark;}
.bgc-dark{background-color: $dark;}
$white:#ffffff;
.white{color: $white;}
.bgc-white{background-color: $white;}
$green:#28B779;
.green{color: $green;}
.bgc-green{background-color: $green;}
$red:#ed424b;
.red{color: $red;}
.bgc-red{background-color: $red;}
$disabled:#ccc;
.disabled{color: $disabled;}
.bgc-disabled{background-color: $disabled;}
$blue:#4284ed;
.blue{color: $blue;}
.bgc-blue{background-color: $blue;}
.fly-btn::first-line{color: #fff;}
.fly-btn.white::first-line{color: #323232;}
.bd-normal{border:1px solid;}
.bdc-c{border-color:$normal;}
.ls-n{letter-spacing: normal;}
.fstyle-i{font-style:italic}
.fstyle-n{font-style:normal}
.fstyle-o{font-style:oblique}
.fw-300{font-weight:300}
.fw-400{font-weight:400}
.fw-500{font-weight:500}
.fw-600{font-weight:600}
.w-960{width:960px}
.w-1000{width:1000px}
.w-1100{width:1100px}
.w-1200{width:1200px}
.ve-t{vertical-align:top}
.ve-m{vertical-align:middle}
.ve-b{vertical-align:bottom}
.dp-b{display:block}
.dp-ib{display:inline-block}
.dp-n{display:none}
.dp-t{display:table}
.dp-tc{display:table-cell}
.dp-tr{display:table-row}
.dp-f{display:flex;display: -webkit-flex}
.dp-if{display:inline-flex}
.dp-it{display:inline-table}
.dp-li{display:list-item}
*{box-sizing: border-box}
/*清除浮动*/
%clearfix {
  &:before,
  &:after {
    content: "";
    display: table;
    font: 0/0 a;
  }
  &:after {
    clear: both;
  }
}
.c-fff {
  color: #ffffff;
}
.cl{@extend %clearfix}
.fl{float:left}
.fr{float:right}
.fn{float:none}
.ps-f{position:fixed}
.ps-a{position:absolute}
.ps-r{position:relative}
.tc{text-align:center}
.tl{text-align:left !important}
.tr{text-align:right !important}
.tj{text-align:justify !important}